<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { docheckphone } from '@/api/register'
import { showSuccessToast, showFailToast } from 'vant';
const router = useRouter()

const username = ref('')
const knowOne = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
// 表单提交事件
function onSubmit() {
    if (!knowOne.test(username.value)) {
        return showFailToast('手机号格式错误');
    }
    docheckphone({ tel: username.value }).then(res => {
        // console.log(res)
        if (res.data.code !== '200') {
            return showFailToast('手机号已注册');
        }

        showSuccessToast('手机号验证成功')
        window.localStorage.setItem('tel', username.value)
        router.push('/register/step2')
    })
}
</script>

<template>
    <div>
        <h1>注册</h1>
        <p>请告诉我们，您的手机号码</p>

        <!-- 手机号码输入框和按钮 -->
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="用户名" label="手机号码" placeholder="手机号号码"
                    :rules="[{ required: true, message: '请填写手机号号码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    下一步
                </van-button>
            </div>
        </van-form>


    </div>
</template>

<style lang="scss" scoped>
h1,
p {
    margin-left: 8%;
}
</style>